<template>
  <div class="default__main" v-if="Data">
    <div class="header">
      <myheader></myheader>
    </div>
    <nav-left></nav-left>
    <div class="default__main--scroll">
      <div class="default__main__container">
        <div class="cv_box">
          <el-dialog title="修改简历名称" @close="closeResumeName" :visible.sync="dialogFormVisible">
            <div class="clearfix">
              <div class="form_groun">
                <label class="label right">简历名称</label>
                <el-input v-model="Data.base.name" placeholder="请输入内容"></el-input>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button @click="dialogFormVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveName">保 存</el-button>
            </div>
          </el-dialog>
          <el-tooltip class="item" effect="dark" content="点击修改简历名称" placement="top">
            <div class="cv_name" @click="dialogFormVisible=true">{{Data.base.name}}</div>
          </el-tooltip>

          <cv-base v-if="cvDefaultModal=='base'" @changeData='changeData' :value="Data.base"></cv-base>
          <cv-hobby v-if="cvDefaultModal=='hobby'" :value="Data.hobby"></cv-hobby>
          <cv-skill v-if="cvDefaultModal=='skill'" :value="Data.skill"></cv-skill>
          <cv-work v-if="cvDefaultModal=='work'" @changeData="changeData"  :value="Data.work"></cv-work>
          <cv-edu v-if="cvDefaultModal=='edu'" @changeData="changeData" :value="Data.edu"></cv-edu>
          <cv-target v-if="cvDefaultModal=='target'" :value="Data.target"></cv-target>
          <cv-base-intro v-if="cvDefaultModal=='baseIntro'" @updateDataStr="updateDataStr" :value="Data.baseIntro"></cv-base-intro>
          <cv-eduexperience v-if="cvDefaultModal=='eduexperience'" @changeData="changeData" :value="Data.eduExperience"></cv-eduexperience>
          <cv-certificate v-if="cvDefaultModal=='certificate'" @changeData="changeData" :value="Data.certificate"></cv-certificate>
          <cv-project v-if="cvDefaultModal=='project'" @changeData="changeData" :value="Data.project"></cv-project>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { allData, logout, saveReumeName } from "api";
import cvBase from "./cvComponents/base";
import cvHobby from "./cvComponents/hobby";
import cvSkill from "./cvComponents/skill";
import cvWork from "./cvComponents/work";
import cvEdu from "./cvComponents/edu";
import cvTarget from "./cvComponents/target";
import cvBaseIntro from "./cvComponents/baseIntro";
import cvEduexperience from "./cvComponents/eduexperience";
import cvCertificate from "./cvComponents/certificate";
import cvProject from "./cvComponents/project";
export default {
  components: {
    "cv-base": cvBase,
    "cv-base-intro": cvBaseIntro,
    "cv-hobby": cvHobby,
    "cv-skill": cvSkill,
    "cv-work": cvWork,
    "cv-edu": cvEdu,
    "cv-eduexperience": cvEduexperience,
    "cv-target": cvTarget,
    "cv-certificate": cvCertificate,
    "cv-project": cvProject
  },
  watch: {
    $route: "changeType"
  },
  data() {
    return {
      Data: null,
      cvDefaultModal: this.$route.query.type || "base",
      dialogFormVisible: false,
      resumeDefaultName: ""
    };
  },
  mounted() {
    this.$promise.post(allData).then(resp => {
      console.log(resp);
      if (resp.status == 1) {
        this.Data = resp.data;
        this.resumeDefaultName = this.Data.base.name;
      } else {
        // this.$message(resp.msg)
      }
    });
  },
  methods: {
    closeResumeName() {
      if (this.Data.base.name == "") {
        this.Data.base.name = this.resumeDefaultName;
      }
    },
    saveName() {
      if (this.Data.base.name == "") {
        this.$message({
          message: "简历名称不能为空",
          type: "error"
        });
      }
      this.$promise
        .post(saveReumeName, {
          resumeName: this.Data.base.name
        })
        .then(resp => {
          if (resp.status == 1) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
            this.dialogFormVisible = false;
          }
        });
    },
    changeData({ type, key, val }) {
      if(key){
        this.Data[type][key] = val;
      }else{
        this.Data[type] = val;
      }  
    },
    updateDataStr({ type, val }) {
      this.Data[type] = val;
    },
    changeType() {
      this.cvDefaultModal = this.$route.query.type || "base";
    }
  }
};
</script>
<style lang="scss">
  .image-upload-bg{
    z-index: 998;
  }
  .base-module,
  .baseIntro-module,
  .target-module,
  .hobby-module,
  .work-module,
  .edu-module,
  .eduexperience-module,
  .certificate-module,
  .project-module{
    border-radius:5px;
    overflow: hidden;
  }
.cv_box {
  .cv_name {
    font-size: 30px;
    color: #0568c5;
    text-align: center;
    position: relative;
    cursor: pointer;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  .module-title {
    line-height: 20px;
    background: #0568c5;
    color: #fff;
    padding: 10px;
    display: flex;
    justify-content: space-between;
  }
  .edit-box {
    padding: 30px;
    .form_groun {
      display: flex;
      margin-bottom: 20px;
      line-height: 36px;
      .radio-box {
        width: 100%;
      }
      .select-box {
        width: 100%;
        &.select_w100 {
          .el-select {
            width: 100%;
          }
        }
      }
      .el-checkbox-button {
        height: 36px;
      }
      .checkbox-box {
        width: 100%;
      }
      .label {
        width: 120px;
        order: 0;
        line-height: 1;
        font-size: 14px;
        padding: 11px 12px 11px;
        &.right {
          text-align: right;
        }
      }

      .el-date-editor.el-input {
        width: 100%;
      }
    }
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
}
</style>


